<template>
	<view class="uni-login-box" :style="!show ? 'z-index:-1;opacity:0' : 'z-index:9;opacity:1'" @tap="refuse"  @touchmove.stop.prevent="">
		<view class="customer" @tap.stop="">
			<view class="banner_top">
				<image :src="Url + 'add_images/customer.png'"></image>
			</view>
			<view class="banner_bottom">
				<view class="banner_code">
					<image :src="ServiceData.wechat_qr" mode="widthFix"></image>
				</view>
				<view class="banner_tel" @tap="tocall"> 拨打客服热线 </view>
				<view class="banner_info">
					<view class="weixin">微信号 : {{ServiceData.wxchat}}</view>
					<view class="copy" @tap="tocopy">
						<image :src="Url + 'add_images/copy.png'" mode=""></image>复制
					</view>
				</view>
				<view class="banner_time">客服工作时间 {{ServiceData.start_time}}-{{ServiceData.end_time}}</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		xcxLogin,
		xcxMobile,
		xcxReg
	} from '@/common/login.js';
	import {
		sellerService,
	} from '@/common/mine.js';
	import h5Copy from '@/store/junyi-h5-copy.js'
	export default {
		data() {
			return {
				Url: this.Imgurl,
				show: false,
				ServiceData: {},
			}
		},
		created() {
			this.getData()
		},
		methods: {
			refuse() {
				this.show = false;
			},
			getData() {
				sellerService().then(res => {
					console.log(res)
					if (res.code == 1) {
						this.ServiceData = res.msg
					} else {
						this.toast(res.msg)
					}
				}).catch()
			},
			//拨打客服热线
			tocall() {
				uni.makePhoneCall({
					phoneNumber: this.ServiceData.mobile
				});
			},
			// 触发方法
			tocopy() {
				console.log("点击复制")
				console.log(uni.getSystemInfoSync())
				console.log(uni.getSystemInfoSync().version)
				if (uni.getSystemInfoSync().version) {
					//小程序复制
					this.chenxuCopy()
				} else {
					this.h5Copy();
				}

			},
			h5Copy() {
				console.log("走到h5")
				let content = this.ServiceData.wxchat // 复制内容，必须字符串，数字需要转换为字符串
				const result = h5Copy(content)
				console.log(result)
				if (!result) {
					uni.showToast({
						title: '不支持',
					})
				} else {
					this.toast('复制成功');
				}
			},
			chenxuCopy() {
				uni.setClipboardData({
					data: this.ServiceData.wxchat,
					success: function() {
						console.log('success');
					}
				});
				uni.getClipboardData({
					success: function(res) {
						console.log(res.data);
						this.toast("复制成功")
					}

				});
			},

		}

	}
</script>

<style lang="less" scoped>
	.uni-login-box {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.5);
		transition: all 0.2s linear;
	}

	.customer {
		position: fixed;
		background-color: #fff;
		border-radius: 15upx;
		width: 564upx;
		height: 720upx;
		overflow: hidden;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);

		.erricon {
			font-size: 32upx;
			color: #999999;
			position: absolute;
			right: 20upx;
			top: 20upx;
		}

		.banner_top {
			width: 100%;
			height: 220upx;
			background: #63C3A5;
			display: flex;
			justify-content: center;
			align-items: flex-end;

			image {
				width: 238upx;
				height: 176upx;
			}
		}

		.banner_bottom {
			padding: 0 50upx;

			.banner_code {
				display: flex;
				justify-content: center;
				align-items: center;
				margin: 20upx;

				image {
					width: 222upx;
					height: 222upx;
				}
			}

			.banner_tel {
				height: 68upx;
				background: #FF2842;
				color: #fff;
				font-size: 30upx;
				text-align: center;
				line-height: 68upx;
				border-radius: 35upx;
				margin: 0 10upx;
			}

			.banner_info {
				margin: 35upx auto 0;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24upx;

				.weixin {
					color: #666;
				}

				.copy {
					margin-left: 10upx;
					color: #0390FD;

					image {
						width: 25upx;
						height: 23upx;
						vertical-align: middle;
					}
				}
			}

			.banner_time {
				color: #999;
				font-size: 24upx;
				display: flex;
				justify-content: center;
				align-items: center;
				margin-top: 35upx;
			}
		}


	}
</style>
